<template>
  <div class="main-menu">
    <div class="menu">
      <!-- 固定导航 -->
      <el-menu unique-opened :collapse="isFold" :default-active="defaultActive" :text-color="textColor"
        :active-text-color="activeColor" :background-color="bgColor" mode="horizontal">
        <el-menu-item :index="item.path" v-for="(item, index) in userMenus" :key="item.path" @click="handleMenuItemClick"
          @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseSekeave(index)">
          {{ item.meta.title }}
        </el-menu-item>
        <!-- 自定义导航 -->
        <el-menu-item :index="item.id" v-for="item in showSefMenusList" :key="item.id" @click="handleSefMenuItemClick">
          {{ item.navigationBarName }}
        </el-menu-item>
        <!-- 更多 -->
        <el-sub-menu index="14" v-if="moreSefMenusList.length > 0">
          <template #title>更多</template>
          <el-menu-item :index="item.id" v-for="item in moreSefMenusList" :key="item.id" @click="handleSefMenuItemClick">{{
            item.navigationBarName }}</el-menu-item>
        </el-sub-menu>
      </el-menu>

    </div>
    <PopUp-one v-show="show" @mouseenter="show = true" @mouseleave="show = false" />
    <PopUp-two v-show="isShow" @mouseenter="isShow = true" @mouseleave="isShow = false" />
    <PopUp-three v-show="isCloudProductShow" @mouseenter="isCloudProductShow = true"
      @mouseleave="isCloudProductShow = false" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { clientSubRoutes } from "@/router/client/index";
import PopUpOne from "@/utils/components/pop_up/pop_up_one.vue";
import PopUpTwo from "@/utils/components/pop_up/pop_up_two.vue";
import PopUpThree from "@/utils/components/pop_up/pop_up_three.vue";
import { useRoute, useRouter } from "vue-router";
import { navigationTypeList } from '@/api/menus/navigationSef';
const router = useRouter();
const route = useRoute();

const defaultActive = ref(route.path);
const userMenus = ref<any>([]);
userMenus.value = clientSubRoutes.filter((item: any) => item.meta);
const show = ref(false);
const isShow = ref(false);
const isCloudProductShow = ref(false);//云产品菜单显示隐藏开关
const sefMenusList = ref<any>([]);//自定义菜单
const showSefMenusList = ref<any>([]);//导航栏展示的导航列表，最多5条
const moreSefMenusList = ref<any>([]);//多余5条的在更多中展示

onMounted(() => {
  getNavigationTypeList();
}),

  watch(route, () => {
    defaultActive.value = route.path;
  });

defineProps({
  isFold: {
    type: Boolean,
    default: false,
  },
  bgColor: {
    type: String,
    default: "#ffffff",
  },
  activeColor: {
    type: String,
    default: "#4098FF",
  },
  textColor: {
    type: String,
    default: "#313131",
  },
});

//  监听item滑动事件
const handleMouseEnter = (index: any) => {
  show.value = index == 5;
  isShow.value = index == 6;
  isCloudProductShow.value = index == 1;
};

//  监听item滑出事件
const handleMouseSekeave = (index: any) => {
  show.value = false;
  isShow.value = false;
  isCloudProductShow.value = false;
};

// 跳转页面
const handleMenuItemClick = (e: any) => {

  if (e.index === "/client/serviceAndSupport" || e.index === "/client/cloudProduct") {
    router.push("");
  } else {
    const url = e.index;
    router.push(url);
  }
};

/**点击自定义导航 */
const handleSefMenuItemClick = (e: any) => {
  const nameArr = sefMenusList.value.filter((item: any) => item.id == e.index);
  const nameObj = <any>(nameArr ? nameArr[0] : {});
  router.push(`/client/sefNavigation?id=${e.index}&name=${nameObj ? nameObj.navigationBarName : ''}`);
}
/**获取导航类别列表 */
const getNavigationTypeList = () => {
  let data = {
    params: {
      pageNum: 1,
      pageSize: 100
    }
  };
  navigationTypeList(data).then((res: any) => {
    if (200 == res.code) {
      sefMenusList.value = res.rows;
      if (sefMenusList.value.length < 6) {
        showSefMenusList.value = sefMenusList.value;
        moreSefMenusList.value = [];
      } else {
        showSefMenusList.value = sefMenusList.value.slice(0, 5);
        moreSefMenusList.value = sefMenusList.value.slice(5);
      }
    }
  })
}
</script>

<style lang="less" scoped>
.main-menu {
  background-color: #fff;
  position: relative;
}

.el-menu {
  border-right: none;
  user-select: none;
}

:deep(.el-menu--horizontal) {
  .el-menu-item {
    border-bottom: 0.125rem solid transparent;

    &:hover,
    &:focus {
      border-bottom: 0.125rem solid #4098ff;
      background-color: rgba(255, 255, 255, 0.5) !important;
    }
  }

  .is-active {
    border-bottom: 0.125rem solid #4098ff;
    background-color: transparent !important;
  }
}
</style>
